<template>
    <div class="app-container">
        <el-dialog :visible="musicStyleVisible" :title="formatTitle" @close="closeDialog">
            <el-form  label-position="right" label-width="100px">
                <el-row>
                    <el-col :span="20">
                        <el-form-item :label="typeName+'名：'" prop="" >
                            <el-input :readonly="titleNum==1" v-model="musicStyleForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="标签：" prop="" >
                            <el-select  class="select" :disabled="titleNum==1" v-model="musicStyleForm.tag" placeholder="请选择">
                                <el-option label="农产品" value="0"/>
                                <el-option label="贴剂" value="1"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="状态：" prop="" >
                            <el-select class="select" :disabled="titleNum==1" v-model="musicStyleForm.status" placeholder="请选择">
                                <el-option label="农产品" value="0"/>
                                <el-option label="贴剂" value="1"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="btns">
                    <el-button type="info" @click="cancel">取消</el-button>
                    <el-button type="primary" @click="confirm">确定</el-button>
                </div>
             </el-form>
             <!-- titleNum:{{ titleNum }}
             {{ musicStyleForm }}
             {{ musicStyleList }} -->
        </el-dialog>
    </div>
</template>

<script>
import { TimeSelect } from 'element-ui';

export default {
    data() {
        return {
            musicStyleForm: {
                name: '',
                tag: '',
                status: 0
            }
        }
    },
    props: {
        titleNum: { // 0添加，1查看，2编辑
            type: Number,
            required: true
        },
        musicStyleList: {
            type: Object,
            required: true
        },
        musicStyleVisible: {
            type: Boolean,
            required: true
        },
        myindex: {
            type: Number,
            required: true
        },
        typeName: {
            type: String,
            required: true
        }
    },
    mounted() {
        console.log(this.titleNum)
    },
    computed: {
        formatTitle() {
            const titles = {
                0: '添加',
                1: '查看',
                2: '编辑',
                3: '删除'
            }
            return titles[this.titleNum]
            // return this.ditaillist.status === 1 ? '启用' : '禁用'
        }
    },
    methods: {
        closeDialog() {
            this.$emit('update:musicStyleVisible', false)
            // this.$emit('update:remarkProptIndex', -1)
        },
        cancel() {
            this.$emit('update:musicStyleVisible', false)
            this.$message({
                type: 'info',
                message: '取消修改'
            });
        },
        confirm() {

        },
        del() {

        }
    },
    watch: {
        myindex(val) {
            console.log('index变了', val)
            this.musicStyleForm = Object.assign(this.musicStyleList,{})
            
        }
    }
}
</script>

<style>
.btns {
    margin-top: 20px;
    display: flex;
    justify-content: right;
}

.select {
    width: 100%;
}
</style>